<template>
  <div>
    <NavBar />
    <div class="documentation">
      <div class="content-wrapper">
        <aside class="sidebar">
          <div class="sidebar-header">
            <h3>SDK 文档</h3>
          </div>
          <ul>
            <li><a :class="{active: currentSection === 'overview'}" @click="setCurrentSection('overview')">概述</a></li>
            <li><a :class="{active: currentSection === 'compliance'}" @click="setCurrentSection('compliance')">应用合规指引</a></li>
            <li><a :class="{active: currentSection === 'quickstart'}" @click="setCurrentSection('quickstart')">快速开始</a></li>
            <li><a :class="{active: currentSection === 'websdk'}" @click="setCurrentSection('websdk')">Web SDK</a></li>
            <li><a :class="{active: currentSection === 'uniappsdk'}" @click="setCurrentSection('uniappsdk')">UniApp SDK</a></li>
            <li><a :class="{active: currentSection === 'reactsdk'}" @click="setCurrentSection('reactsdk')">React SDK</a></li>
            <li><a :class="{active: currentSection === 'androidsdk'}" @click="setCurrentSection('androidsdk')">Android SDK</a></li>
            <li><a :class="{active: currentSection === 'iossdk'}" @click="setCurrentSection('iossdk')">iOS SDK</a></li>
            <li><a :class="{active: currentSection === 'apikey-guide'}" @click="setCurrentSection('apikey-guide')">API Key 获取</a></li>
            <li><a :class="{active: currentSection === 'testing-guide'}" @click="setCurrentSection('testing-guide')">测试指南</a></li>
            <li><a :class="{active: currentSection === 'best-practices'}" @click="setCurrentSection('best-practices')">最佳实践</a></li>
            <li><a :class="{active: currentSection === 'troubleshooting'}" @click="setCurrentSection('troubleshooting')">常见问题</a></li>
            <li><a :class="{active: currentSection === 'contact'}" @click="setCurrentSection('contact')">联系我们</a></li>
          </ul>
        </aside>

        <main class="content">
          <!-- 概述 -->
          <div v-if="currentSection === 'overview'" id="overview">
            <h1>SDK 技术文档</h1>
            <h2>产品概述</h2>
            <p>XappTool 提供免邀请码安装归因与多平台 SDK，支持快速集成、精准归因与数据安全防护，助力业务增长与推广渠道效果评估。</p>
            <h2>支持平台</h2>
            <ul class="doc-list">
              <li>Web SDK：支持所有现代浏览器</li>
              <li>UniApp SDK：一次开发，多端运行</li>
              <li>React SDK：专为 React 应用优化</li>
              <li>Android SDK：原生 Android 支持</li>
              <li>iOS SDK：原生 iOS 支持</li>
            </ul>

            <h2>技术原理</h2>
            <ul class="doc-list">
              <li>免邀请码：通过设备指纹与点击/安装时序自动建立邀请关系，无需用户手动输入。</li>
              <li>多维归因：精确匹配 → 模糊匹配 → IP/时间窗口回退，输出置信度与归因方法。</li>
              <li>反作弊：综合设备特征、环境信号与行为异常，识别模拟器、自动化与高风险来源。</li>
            </ul>

            <h2>指纹技术原理</h2>
            <ul class="doc-list">
              <li>设备信息：平台、UA、语言与时区、屏幕尺寸与 DPR、硬件并发、触摸能力等基础维度。</li>
              <li>增强特征（Web/H5）：Canvas/WebGL/Audio/Fonts/Plugins 生成稳定特征指纹。</li>
              <li>哈希一致性：统一使用 SHA-256 对多维特征进行规范化与哈希，跨端保持对齐。</li>
              <li>隐私最小化：不采集敏感标识，IP 脱敏/哈希，遵循最小必要采集原则。</li>
            </ul>

            <h2>归因算法</h2>
            <ul class="doc-list">
              <li>精确匹配：相同设备指纹 + 合理时间窗口（如点击→安装 ≤ 24–72h）。</li>
              <li>模糊匹配：相似度计算（子集特征一致 + 时序接近），输出置信度分值。</li>
              <li>回退策略：IP/地域/渠道组合与时间窗口兜底，标记 method=organic 或低置信度。</li>
              <li>时序与去重：同一设备首次安装优先，二次安装/复装特殊标记与去重处理。</li>
            </ul>

            <h2>反作弊机制</h2>
            <ul class="doc-list">
              <li>环境检测：Headless/WebDriver、插件异常、UA 伪造、模拟器/越狱/root 风险识别。</li>
              <li>网络信号：代理/VPN 标记、异常 RTT/连接类型、IP 频次与聚集度分析。</li>
              <li>行为异常：超高速点击/安装、同设备多账户、同账户多设备等可疑模式识别。</li>
              <li>评分与拦截：输出风险分与理由列表，用于风控拦截或低置信度归因处理。</li>
            </ul>

            <h2>数据流与时序</h2>
            <ul class="doc-list">
              <li>点击阶段：生成/解析分享参数，记录点击指纹与时序。</li>
              <li>安装阶段：SDK 上报设备指纹与安装事件，服务端进行归因匹配与反作弊评估。</li>
              <li>关系建立：成功归因后写入邀请关系与渠道统计；失败则落入 organic 与兜底策略。</li>
              <li>统计汇总：按日/渠道维度聚合安装、点击、转化、留存与作弊率等指标。</li>
            </ul>
          </div>

          <!-- 快速开始 -->
          <div v-if="currentSection === 'quickstart'" id="quickstart">
            <h1>快速开始</h1>
            <p>根据您的需求选择不同的接入方案：</p>
            
            <div class="integration-options">
              <div class="option-card">
                <h3>🔧 统一落地页方案</h3>
                <p>使用平台提供的统一落地页，无需开发自己的网页，快速集成</p>
                <div class="option-features">
                  <span class="feature-tag">无需开发</span>
                  <span class="feature-tag">快速集成</span>
                  <span class="feature-tag">自动适配</span>
                </div>
              </div>
              
              <div class="option-card">
                <h3>🎨 自定义落地页方案</h3>
                <p>使用Web SDK在您自己的网站中集成，完全自定义页面样式和功能</p>
                <div class="option-features">
                  <span class="feature-tag">完全自定义</span>
                  <span class="feature-tag">灵活配置</span>
                  <span class="feature-tag">品牌一致</span>
                </div>
              </div>
            </div>

            <!-- 统一落地页接入步骤 -->
            <div class="integration-section">
              <h2>一、统一落地页接入步骤</h2>
              <div class="section-description">
                <p>使用平台提供的统一落地页，适合快速集成，无需开发自己的网页</p>
              </div>
              
              <ol class="doc-steps">
                <li>
                  <h3>注册商户账号</h3>
                  <p>访问商户平台，注册并完成账号验证。</p>
                  <a href="/register" class="step-link">立即注册</a>
                </li>
                <li>
                  <h3>控制台创建应用</h3>
                  <p>在控制台创建应用，获取 API Key，并配置应用商店链接</p>
                  <a href="/console" class="step-link">创建应用</a>
                </li>
                <li>
                  <h3>获取分享链接</h3>
                  <p>在控制台生成统一落地页分享链接，支持自定义参数</p>
                  <div class="step-detail">
                    <p>• 进入控制台 → 应用管理 → 选择应用 → 生成分享链接</p>
                    <p>• 选择"统一落地页"类型</p>
                    <p>• 可添加自定义参数（如邀请人ID、活动ID等）</p>
                  </div>
                </li>
                <li>
                  <h3>在App中调用分享组件</h3>
                  <p>在您的App中集成分享功能，使用获取到的分享链接</p>
                  <div class="code-example">
                    <h4>Android 示例：</h4>
                    <pre><code>// 获取分享链接
String shareUrl = "https://your-domain.com/lp/unified/your-app-id?inviter=user123";

// 调用系统分享
Intent shareIntent = new Intent(Intent.ACTION_SEND);
shareIntent.setType("text/plain");
shareIntent.putExtra(Intent.EXTRA_TEXT, "邀请您使用我的应用: " + shareUrl);
startActivity(Intent.createChooser(shareIntent, "分享到"));</code></pre>
                    
                    <h4>iOS 示例：</h4>
                    <pre><code>// 获取分享链接
let shareUrl = "https://your-domain.com/lp/unified/your-app-id?inviter=user123"

// 调用系统分享
let activityVC = UIActivityViewController(activityItems: [shareUrl], applicationActivities: nil)
present(activityVC, animated: true)</code></pre>
                  </div>
                </li>
                <li>
                  <h3>App启动时获取参数</h3>
                  <p>在App启动时监听并获取分享的自定义参数</p>
                  <div class="code-example">
                    <h4>Android 示例（在 onCreate 中）：</h4>
                    <pre><code>@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    
    // 获取启动参数
    Intent intent = getIntent();
    Uri data = intent.getData();
    
    if (data != null) {
        // 解析参数
        String inviter = data.getQueryParameter("inviter");
        String campaign = data.getQueryParameter("campaign");
        
        // 处理邀请逻辑
        if (inviter != null) {
            // 建立邀请关系
            handleInvitation(inviter);
        }
    }
}</code></pre>
                    
                    <h4>iOS 示例（在 AppDelegate 中）：</h4>
                    <pre><code>func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
    // 解析URL参数
    if let components = URLComponents(url: url, resolvingAgainstBaseURL: false),
       let queryItems = components.queryItems {
        
        let params = queryItems.reduce(into: [String: String]()) { result, item in
            result[item.name] = item.value
        }
        
        // 处理邀请逻辑
        if let inviter = params["inviter"] {
            handleInvitation(inviter: inviter)
        }
    }
    
    return true
}</code></pre>
                  </div>
                </li>
              </ol>
            </div>

            <!-- 自定义落地页接入步骤 -->
            <div class="integration-section">
              <h2>二、自定义落地页接入步骤</h2>
              <div class="section-description">
                <p>使用Web SDK在您自己的网站中集成，完全自定义页面样式和功能</p>
              </div>
              
              <ol class="doc-steps">
                <li>
                  <h3>注册商户账号</h3>
                  <p>访问商户平台，注册并完成账号验证。</p>
                  <a href="/register" class="step-link">立即注册</a>
                </li>
                <li>
                  <h3>控制台创建应用</h3>
                  <p>在控制台创建应用，获取 API Key</p>
                  <a href="/console" class="step-link">创建应用</a>
                </li>
                <li>
                  <h3>获取分享链接</h3>
                  <p>在控制台生成自定义落地页分享链接</p>
                  <div class="step-detail">
                    <p>• 进入控制台 → 应用管理 → 选择应用 → 生成分享链接</p>
                    <p>• 选择"自定义落地页"类型</p>
                    <p>• 填写您的落地页地址</p>
                  </div>
                </li>
                <li>
                  <h3>在落地页接入Web SDK</h3>
                  <p>在您自己的网站中集成Web SDK，实现自动跳转功能</p>
                  <div class="code-example">
                    <h4>HTML页面示例：</h4>
                    <pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;应用下载&lt;/title&gt;
    &lt;script src="https://sdk.xapptool.cn/web/xapptool.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;欢迎下载我们的应用&lt;/h1&gt;
    &lt;button id="downloadBtn"&gt;立即下载&lt;/button&gt;
    
    &lt;script&gt;
        // 初始化SDK
        const xapptool = new XappTool();
        
        async function initPage() {
            await xapptool.init({
                app_key: 'your_app_key_here'
            });
            
            // 自动跳转（可选）
            await xapptool.autoJump({
                ios: 'https://apps.apple.com/app/id123456789',
                android: 'https://play.google.com/store/apps/details?id=com.example.app',
                fallback: 'https://example.com/download'
            });
        }
        
        // 手动下载按钮
        document.getElementById('downloadBtn').addEventListener('click', function() {
            xapptool.redirectToStore({
                ios: 'https://apps.apple.com/app/id123456789',
                android: 'https://play.google.com/store/apps/details?id=com.example.app',
                fallback: 'https://example.com/download'
            });
        });
        
        // 页面加载完成后初始化
        initPage();
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
                  </div>
                  <div class="step-note">
                    <p><strong>注意：</strong> Web SDK会自动处理scheme检测、应用商店选择和跳转逻辑</p>
                  </div>
                </li>
                <li>
                  <h3>在App中调用分享组件</h3>
                  <p>在您的App中集成分享功能，使用获取到的自定义落地页链接</p>
                  <div class="code-example">
                    <h4>分享您的自定义落地页：</h4>
                    <pre><code>// 获取自定义落地页链接
String customLandingUrl = "https://your-website.com/landing.html?inviter=user123";

// 调用系统分享（与统一落地页相同）
Intent shareIntent = new Intent(Intent.ACTION_SEND);
shareIntent.setType("text/plain");
shareIntent.putExtra(Intent.EXTRA_TEXT, "邀请您使用我的应用: " + customLandingUrl);
startActivity(Intent.createChooser(shareIntent, "分享到"));</code></pre>
                  </div>
                </li>
                <li>
                  <h3>App启动时获取参数</h3>
                  <p>在App启动时监听并获取分享的自定义参数（与统一落地页相同）</p>
                  <div class="step-note">
                    <p><strong>提示：</strong> 无论是统一落地页还是自定义落地页，App端获取参数的方式完全相同</p>
                  </div>
                </li>
              </ol>
            </div>

            <!-- 通用步骤 -->
            <div class="integration-section">
              <h2>三、测试验证</h2>
              <ol class="doc-steps">
                <li>
                  <h3>功能测试</h3>
                  <p>使用控制台提供的测试工具验证集成效果</p>
                  <a href="/console/test" class="step-link">进入测试中心</a>
                </li>
                <li>
                  <h3>真机测试</h3>
                  <div class="step-detail">
                    <p>• 在不同设备上测试分享和安装流程</p>
                    <p>• 验证参数传递是否正确</p>
                    <p>• 检查归因数据是否正常</p>
                  </div>
                </li>
                <li>
                  <h3>数据统计</h3>
                  <p>在控制台查看安装统计和归因数据</p>
                  <a href="/console" class="step-link">查看数据统计</a>
                </li>
              </ol>
            </div>
          </div>

          <!-- Web SDK -->
          <div v-if="currentSection === 'websdk'" id="websdk">
            <h1>Web SDK</h1>
            <div class="sdk-section">
              <div class="warning-box">
                <h3>⚠️ 重要说明</h3>
                <p><strong>Web SDK 是提供给用户在自定义落地页中集成的，不是用于平台自身的落地页。</strong></p>
                <p>如果您需要在平台创建落地页，请使用控制台中的"创建落地页"功能。Web SDK 适用于您自己的网站中集成免邀请码安装功能。</p>
              </div>
              
              <h2>使用场景</h2>
              <p>Web SDK 专为以下场景设计：</p>
              <ul class="doc-list">
                <li>您自己的网站或H5页面中集成免邀请码安装功能</li>
                <li>自定义营销落地页，需要自动跳转到应用商店</li>
                <li>需要在用户网站中生成带参数的分享链接</li>
                <li>追踪用户网站的安装转化数据</li>
              </ul>
              
              <h2>核心功能</h2>
              <ul class="doc-list">
                <li><strong>自动跳转</strong>：检测应用是否安装，已安装则直接打开，未安装则跳转到对应应用商店</li>
                <li><strong>智能商店选择</strong>：根据设备类型和品牌自动选择合适的应用商店</li>
                <li><strong>参数传递</strong>：生成带参数的分享链接，用于归因分析</li>
                <li><strong>数据追踪</strong>：记录跳转事件和转化数据</li>
              </ul>
              
              <h2>安装</h2>
              <div class="install-methods">
                <div class="install-method">
                  <h3>CDN 引入</h3>
                  <div class="code-content">
                    <button class="copy-btn" @click="copyCode(webCdnCode)">复制</button>
                    <pre><code class="html">{{ webCdnCode }}</code></pre>
                  </div>
                </div>
                
                <div class="install-method">
                  <h3>npm 安装</h3>
                  <div class="code-content">
                    <button class="copy-btn" @click="copyCode(webNpmCode)">复制</button>
                    <pre><code class="bash">{{ webNpmCode }}</code></pre>
                  </div>
                </div>
              </div>
              
              <h2>初始化</h2>
              <div class="code-content">
                <button class="copy-btn" @click="copyCode(webInitCode)">复制</button>
                <pre><code class="javascript">{{ webInitCode }}</code></pre>
              </div>
              
              <h2>自定义落地页自动跳转</h2>
              <p>在您的自定义落地页中实现智能跳转：</p>
              <div class="code-content">
                <button class="copy-btn" @click="copyCode(webAutoJumpCode)">复制</button>
                <pre><code class="javascript">{{ webAutoJumpCode }}</code></pre>
              </div>
              
              <h2>生成分享链接</h2>
              <p>为您的自定义落地页生成带参数的分享链接：</p>
              <div class="code-content">
                <button class="copy-btn" @click="copyCode(webShareCode)">复制</button>
                <pre><code class="javascript">{{ webShareCode }}</code></pre>
              </div>
              
              <h2>手动跳转到应用商店</h2>
              <p>在需要时手动控制跳转到应用商店：</p>
              <div class="code-content">
                <button class="copy-btn" @click="copyCode(webStoreCode)">复制</button>
                <pre><code class="javascript">{{ webStoreCode }}</code></pre>
              </div>
              
              <h2>获取安装参数</h2>
              <div class="code-content">
                <button class="copy-btn" @click="copyCode(webInstallCode)">复制</button>
                <pre><code class="javascript">{{ webInstallCode }}</code></pre>
              </div>
              
              <h2>完整示例</h2>
              <p>以下是一个完整的自定义落地页示例：</p>
              <div class="code-content">
                <button class="copy-btn" @click="copyCode(webFullExampleCode)">复制</button>
                <pre><code class="html">{{ webFullExampleCode }}</code></pre>
              </div>
              
              <h2>配置说明</h2>
              <div class="config-table">
                <table>
                  <thead>
                    <tr>
                      <th>参数</th>
                      <th>类型</th>
                      <th>必填</th>
                      <th>说明</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>scheme</td>
                      <td>string</td>
                      <td>可选</td>
                      <td>应用scheme，如 myapp://，用于尝试打开已安装的应用</td>
                    </tr>
                    <tr>
                      <td>storeUrls.ios</td>
                      <td>string</td>
                      <td>可选</td>
                      <td>iOS App Store 链接</td>
                    </tr>
                    <tr>
                      <td>storeUrls.android</td>
                      <td>string</td>
                      <td>可选</td>
                      <td>Android 通用下载地址</td>
                    </tr>
                    <tr>
                      <td>storeUrls.huawei</td>
                      <td>string</td>
                      <td>可选</td>
                      <td>华为应用市场链接</td>
                    </tr>
                    <tr>
                      <td>storeUrls.xiaomi</td>
                      <td>string</td>
                      <td>可选</td>
                      <td>小米应用商店链接</td>
                    </tr>
                    <tr>
                      <td>storeUrls.oppo</td>
                      <td>string</td>
                      <td>可选</td>
                      <td>OPPO应用商店链接</td>
                    </tr>
                    <tr>
                      <td>storeUrls.vivo</td>
                      <td>string</td>
                      <td>可选</td>
                      <td>VIVO应用商店链接</td>
                    </tr>
                    <tr>
                      <td>storeUrls.googleplay</td>
                      <td>string</td>
                      <td>可选</td>
                      <td>Google Play 链接</td>
                    </tr>
                    <tr>
                      <td>storeUrls.fallback</td>
                      <td>string</td>
                      <td>可选</td>
                      <td>通用下载地址（当其他链接都不可用时）</td>
                    </tr>
                    <tr>
                      <td>timeout</td>
                      <td>number</td>
                      <td>可选</td>
                      <td>scheme检测超时时间，默认2000ms</td>
                    </tr>
                    <tr>
                      <td>onRedirect</td>
                      <td>function</td>
                      <td>可选</td>
                      <td>跳转回调函数，参数包含跳转类型和耗时</td>
                    </tr>
                    <tr>
                      <td>onTimeout</td>
                      <td>function</td>
                      <td>可选</td>
                      <td>超时回调函数</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>

          <!-- UniApp SDK -->
          <div v-if="currentSection === 'uniappsdk'" id="uniappsdk">
            <h1>UniApp SDK</h1>
            <div class="sdk-section">
              <h2>安装</h2>
              <div class="install-methods">
                <div class="install-method">
                  <h3>下载 SDK</h3>
                  <p>下载 UniApp SDK 文件并放入项目目录</p>
                  <a href="https://sdk.xapptool.cn/uniapp/xapptool.js" class="download-btn" download>下载 SDK</a>
                </div>
                
                <div class="install-method">
                  <h3>npm 安装</h3>
                  <div class="code-content">
                    <button class="copy-btn" @click="copyCode(uniappNpmCode)">复制</button>
                    <pre><code class="bash">{{ uniappNpmCode }}</code></pre>
                  </div>
                </div>
              </div>
              
              <h2>初始化</h2>
              <div class="code-content">
                <button class="copy-btn" @click="copyCode(uniappInitCode)">复制</button>
                <pre><code class="javascript">{{ uniappInitCode }}</code></pre>
              </div>
              
              <h2>获取安装参数</h2>
              <div class="code-content">
                <button class="copy-btn" @click="copyCode(uniappInstallCode)">复制</button>
                <pre><code class="javascript">{{ uniappInstallCode }}</code></pre>
              </div>
              
              <h2>平台适配</h2>
              <div class="code-content">
                <button class="copy-btn" @click="copyCode(uniappPlatformCode)">复制</button>
                <pre><code class="javascript">{{ uniappPlatformCode }}</code></pre>
              </div>
            </div>
          </div>

          <!-- React SDK -->
          <div v-if="currentSection === 'reactsdk'" id="reactsdk">
            <h1>React SDK</h1>
            <div class="sdk-section">
              <h2>安装</h2>
              <div class="code-content">
                <button class="copy-btn" @click="copyCode(reactInstallCode)">复制</button>
                <pre><code class="bash">{{ reactInstallCode }}</code></pre>
              </div>
              
              <h2>初始化</h2>
              <div class="code-content">
                <button class="copy-btn" @click="copyCode(reactInitCode)">复制</button>
                <pre><code class="javascript">{{ reactInitCode }}</code></pre>
              </div>
              
              <h2>React Hook</h2>
              <div class="code-content">
                <button class="copy-btn" @click="copyCode(reactHookCode)">复制</button>
                <pre><code class="javascript">{{ reactHookCode }}</code></pre>
              </div>
              
              <h2>组件示例</h2>
              <div class="code-content">
                <button class="copy-btn" @click="copyCode(reactComponentCode)">复制</button>
                <pre><code class="jsx">{{ reactComponentCode }}</code></pre>
              </div>
            </div>
          </div>

          <!-- Android SDK -->
          <div v-if="currentSection === 'androidsdk'" id="androidsdk">
            <h1>Android SDK</h1>
            <div class="sdk-section">
              <h2>添加依赖</h2>
              <div class="code-content">
                <button class="copy-btn" @click="copyCode(androidGradleCode)">复制</button>
                <pre><code class="gradle">{{ androidGradleCode }}</code></pre>
              </div>
              
              <h2>权限配置</h2>
              <div class="code-content">
                <button class="copy-btn" @click="copyCode(androidManifestCode)">复制</button>
                <pre><code class="xml">{{ androidManifestCode }}</code></pre>
              </div>
              
              <h2>初始化</h2>
              <div class="code-content">
                <button class="copy-btn" @click="copyCode(androidInitCode)">复制</button>
                <pre><code class="java">{{ androidInitCode }}</code></pre>
              </div>
              
              <h2>获取安装参数</h2>
              <div class="code-content">
                <button class="copy-btn" @click="copyCode(androidInstallCode)">复制</button>
                <pre><code class="java">{{ androidInstallCode }}</code></pre>
              </div>
            </div>
          </div>

          <!-- iOS SDK -->
          <div v-if="currentSection === 'iossdk'" id="iossdk">
            <h1>iOS SDK</h1>
            <div class="sdk-section">
              <h2>安装 SDK</h2>
              <div class="install-methods">
                <div class="install-method">
                  <h3>CocoaPods</h3>
                  <div class="code-content">
                    <button class="copy-btn" @click="copyCode(iosPodCode)">复制</button>
                    <pre><code class="ruby">{{ iosPodCode }}</code></pre>
                  </div>
                </div>
                
                <div class="install-method">
                  <h3>Swift Package Manager</h3>
                  <div class="code-content">
                    <button class="copy-btn" @click="copyCode(iosSpmCode)">复制</button>
                    <pre><code class="swift">{{ iosSpmCode }}</code></pre>
                  </div>
                </div>
              </div>
              
              <h2>初始化</h2>
              <div class="code-content">
                <button class="copy-btn" @click="copyCode(iosInitCode)">复制</button>
                <pre><code class="swift">{{ iosInitCode }}</code></pre>
              </div>
              
              <h2>获取安装参数</h2>
              <div class="code-content">
                <button class="copy-btn" @click="copyCode(iosInstallCode)">复制</button>
                <pre><code class="swift">{{ iosInstallCode }}</code></pre>
              </div>
            </div>
          </div>

          <!-- API Key 获取 -->
          <div v-if="currentSection === 'apikey-guide'" id="apikey-guide">
            <h1>API Key 获取指南</h1>
            <div class="guide-section">
              <div class="steps">
                <div class="step">
                  <div class="step-number">1</div>
                  <div class="step-content">
                    <h3>登录商户平台</h3>
                    <p>使用您的账号登录商户后台</p>
                    <a href="/login" class="step-link">立即登录</a>
                  </div>
                </div>
                
                <div class="step">
                  <div class="step-number">2</div>
                  <div class="step-content">
                    <h3>创建应用</h3>
                    <p>在控制台创建新的应用</p>
                    <a href="/console/apps/create" class="step-link">创建应用</a>
                  </div>
                </div>
                
                <div class="step">
                  <div class="step-number">3</div>
                  <div class="step-content">
                    <h3>获取 API Key</h3>
                    <p>在应用详情页面获取 API Key</p>
                    <div class="api-key-demo">
                      <div class="api-key-example">
                        <span class="api-key-label">API Key:</span>
                        <span class="api-key-value">xt_1234567890abcdef</span>
                      </div>
                    </div>
                  </div>
                </div>
                
                <div class="step">
                  <div class="step-number">4</div>
                  <div class="step-content">
                    <h3>配置应用</h3>
                    <p>设置应用的基本信息和域名白名单</p>
                    <div class="config-example">
                      <p>应用名称: 我的应用</p>
                      <p>应用包名: com.example.myapp</p>
                      <p>域名白名单: example.com, sub.example.com</p>
                    </div>
                  </div>
                </div>
              </div>
              
              <div class="security-tips">
                <h3>安全提示</h3>
                <ul>
                  <li>请妥善保管您的 API Key，不要在前端代码中明文暴露</li>
                  <li>定期更换 API Key，建议每 90 天更换一次</li>
                  <li>设置合适的域名白名单，防止被恶意使用</li>
                  <li>启用请求频率限制，防止 API 被滥用</li>
                </ul>
              </div>
            </div>
          </div>

          <!-- 测试指南 -->
          <div v-if="currentSection === 'testing-guide'" id="testing-guide">
            <h1>测试指南</h1>
            <div class="guide-section">
              <h2>在线测试工具</h2>
              <div class="test-tool">
                <h3>SDK 集成测试</h3>
                <div class="test-form">
                  <div class="form-group">
                    <label>API Key:</label>
                    <input type="text" v-model="testApiKey" placeholder="请输入您的 API Key" />
                  </div>
                  <div class="form-group">
                    <label>平台:</label>
                    <select v-model="testPlatform">
                      <option value="web">Web</option>
                      <option value="uniapp">UniApp</option>
                      <option value="react">React</option>
                      <option value="android">Android</option>
                      <option value="ios">iOS</option>
                    </select>
                  </div>
                  <button class="test-btn" @click="runTest">运行测试</button>
                </div>
                
                <div class="test-results" v-if="testResults">
                  <h4>测试结果</h4>
                  <div class="result-item" :class="{success: testResults.success}">
                    <span class="result-icon">{{ testResults.success ? '✅' : '❌' }}</span>
                    <span class="result-text">{{ testResults.message }}</span>
                  </div>
                  <div class="result-details" v-if="testResults.details">
                    <pre>{{ JSON.stringify(testResults.details, null, 2) }}</pre>
                  </div>
                </div>
              </div>
              
              <h2>手动测试步骤</h2>
              <div class="manual-test-steps">
                <div class="test-step">
                  <h4>1. 设备指纹测试</h4>
                  <p>验证设备指纹是否正确生成</p>
                  <div class="code-content">
                    <pre><code class="javascript">// 测试代码
const fingerprint = await XInstall.getDeviceFingerprint();
console.log('设备指纹:', fingerprint);</code></pre>
                  </div>
                </div>
                
                <div class="test-step">
                  <h4>2. 邀请参数测试</h4>
                  <p>测试邀请参数获取功能</p>
                  <div class="code-content">
                    <pre><code class="javascript">// 测试代码
const params = await XInstall.getInstallParams();
console.log('安装参数:', params);</code></pre>
                  </div>
                </div>
                
                <div class="test-step">
                  <h4>3. 邀请链接测试</h4>
                  <p>测试邀请链接生成</p>
                  <div class="code-content">
                    <pre><code class="javascript">// 测试代码
const link = await XInstall.generateInvitationLink({
  userId: 'test-user',
  code: 'TEST123'
});
console.log('邀请链接:', link);</code></pre>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 最佳实践 -->
          <div v-if="currentSection === 'best-practices'" id="best-practices">
            <h1>最佳实践</h1>
            <div class="guide-section">
              <div class="practice-categories">
                <div class="practice-category">
                  <h3>🔐 安全最佳实践</h3>
                  <ul>
                    <li>不要在客户端暴露 API Secret</li>
                    <li>使用 HTTPS 协议传输数据</li>
                    <li>启用请求签名验证</li>
                    <li>设置合理的请求频率限制</li>
                  </ul>
                </div>
                
                <div class="practice-category">
                  <h3>⚡ 性能最佳实践</h3>
                  <ul>
                    <li>延迟加载 SDK，避免阻塞页面渲染</li>
                    <li>使用缓存机制减少重复请求</li>
                    <li>批量处理多个邀请请求</li>
                    <li>优化设备指纹生成算法</li>
                  </ul>
                </div>
                
                <div class="practice-category">
                  <h3>📊 数据最佳实践</h3>
                  <ul>
                    <li>定期清理过期数据</li>
                    <li>使用合适的数据存储策略</li>
                    <li>实施数据备份机制</li>
                    <li>监控数据质量和完整性</li>
                  </ul>
                </div>
                
                <div class="practice-category">
                  <h3>🎯 用户体验最佳实践</h3>
                  <ul>
                    <li>提供清晰的邀请流程引导</li>
                    <li>及时反馈邀请状态</li>
                    <li>处理各种异常情况</li>
                    <li>优化移动端体验</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>

          <!-- 常见问题 -->
          <div v-if="currentSection === 'troubleshooting'" id="troubleshooting">
            <h1>常见问题</h1>
            <div class="faq-section">
              <div class="faq-item" v-for="faq in faqs" :key="faq.id">
                <div class="faq-question" @click="toggleFaq(faq)">
                  <h3>{{ faq.question }}</h3>
                  <span class="faq-icon">{{ faq.expanded ? '−' : '+' }}</span>
                </div>
                <div class="faq-answer" v-show="faq.expanded">
                  <p>{{ faq.answer }}</p>
                  <div class="faq-code" v-if="faq.code">
                    <pre><code :class="faq.codeType">{{ faq.code }}</code></pre>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div v-if="currentSection === 'contact'" id="contact">
            <h1>联系我们</h1>
            <p>商务合作与技术支持，请通过以下方式联系：</p>
            <ul class="doc-list">
              <li>邮箱：myloveisphp@126.com</li>
              <li>QQ：1036698712（技术支持）</li>
              <li>微信：xiao142000（产品咨询）</li>
            </ul>
          </div>

          <div v-if="currentSection === 'compliance'" id="compliance">
            <h1>应用合规指引</h1>
            <p>本指引面向集成 XappTool 的应用与网站，帮助您在数据采集、处理与归因场景下满足主流隐私与数据合规要求。</p>

            <h2>数据采集范围（最小化原则）</h2>
            <ul class="doc-list">
              <li>仅采集用于归因与反作弊所必需的设备指纹字段：平台、UA、屏幕尺寸与 DPR、语言与时区、指纹哈希、安装/点击时间窗口。</li>
              <li>默认不采集敏感标识（如精准定位、联系人、相册内容、IMEI/IDFA 等）；如业务必需，应在隐私政策中明确说明用途与法律依据。</li>
              <li>对 IP 进行哈希或脱敏处理；日志中避免保留完整 IP。</li>
            </ul>

            <h2>用户同意与透明度</h2>
            <ul class="doc-list">
              <li>在首次进入页面或启动应用时，展示隐私提示与同意选择（可采用弹窗/横幅）。</li>
              <li>隐私政策中明确：采集目的（归因与反作弊）、字段列表、保留期限、第三方共享情况与退出方式。</li>
              <li>为欧盟用户提供同意管理（可撤回/变更），并在未同意情况下禁用非必要采集。</li>
            </ul>

            <h2>数据主体权利</h2>
            <ul class="doc-list">
              <li>提供访问、更正、删除与限制处理渠道（如客服邮箱：myloveisphp@126.com）。</li>
              <li>响应导出请求（JSON/CSV），在合理期限内完成并留存处理记录。</li>
              <li>支持撤回同意后停止处理，并清理可识别数据。</li>
            </ul>

            <h2>保留期限与去标识化</h2>
            <ul class="doc-list">
              <li>默认保留归因相关原始指纹数据不超过 180 天，统计汇总数据可长期保留（去标识化）。</li>
              <li>超过期限的原始数据定期清理或不可逆去标识化（仅保留聚合指标）。</li>
            </ul>

            <h2>安全控制</h2>
            <ul class="doc-list">
              <li>传输层强制 HTTPS；后端接口使用鉴权与签名校验。</li>
              <li>存储加密（磁盘/字段级）、访问控制（最小权限），审计与漏洞修复流程。</li>
              <li>密钥管理与轮换，避免在客户端明文暴露密钥与敏感配置。</li>
            </ul>

            <h2>第三方共享与处理者管理</h2>
            <ul class="doc-list">
              <li>列出共享对象（如云服务/统计服务），签订数据处理协议（DPA），明确角色与责任。</li>
              <li>对处理者进行安全评估与合规审计，约束其用途与保留期限。</li>
            </ul>

            <h2>未成年人与特殊数据</h2>
            <ul class="doc-list">
              <li>面向未成年人的服务需取得监护人同意，限制行为画像与跨站追踪。</li>
              <li>避免采集健康、宗教等特殊敏感数据；如业务必需，严格法律审查与额外同意。</li>
            </ul>

            <h2>区域性法规要点</h2>
            <ul class="doc-list">
              <li>GDPR（欧盟）：合法性基础（同意/合法利益）、DPIA、数据跨境机制（SCC）、数据保护官（如适用）。</li>
              <li>CCPA/CPRA（加州）：“出售/共享”披露、选择退出链接、敏感信息处理限制、未成年人同意。</li>
              <li>中国（网安法/数安法/个保法）：最小必要、明示告知、个人信息出境评估与合规备案。</li>
            </ul>

            <h2>Cookie/本地存储与 SDK 使用</h2>
            <ul class="doc-list">
              <li>必要性分类：将归因必需的本地存储归为“必要”，其他标记归为“非必要”。</li>
              <li>在未同意情况下禁用非必要 SDK 功能；提供清除存储与退出追踪的接口。</li>
              <li>公开 SDK 版本与变化日志，评估第三方依赖的隐私影响。</li>
            </ul>

            <h2>事件响应与记录</h2>
            <ul class="doc-list">
              <li>建立安全事件响应流程：检测→隔离→评估→上报→通知→复盘。</li>
              <li>留存日志与合规记录（同意、请求处理、数据流向），用于监管检查与内部审计。</li>
            </ul>

            <h2>最佳实践清单</h2>
            <ul class="doc-list">
              <li>完成数据清单与数据流向图；进行 DPIA（高风险场景）。</li>
              <li>隐私政策与同意界面保持最新；提供易用的退出与删除通道。</li>
              <li>定期删除过期原始数据，长期仅保留统计汇总。</li>
              <li>上线前进行安全测试与合规评审；重大变更进行再评估。</li>
            </ul>
          </div>
        </main>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from '@/components/NavBarEnhanced.vue';
import hljs from 'highlight.js/lib/core';
import javascript from 'highlight.js/lib/languages/javascript';
import bash from 'highlight.js/lib/languages/bash';
import xml from 'highlight.js/lib/languages/xml';
import java from 'highlight.js/lib/languages/java';
import swift from 'highlight.js/lib/languages/swift';
import 'highlight.js/styles/github.css';

hljs.registerLanguage('javascript', javascript);
hljs.registerLanguage('bash', bash);
hljs.registerLanguage('xml', xml);
hljs.registerLanguage('java', java);
hljs.registerLanguage('swift', swift);

export default {
  components: {
    NavBar
  },
  data() {
    return {
      currentSection: 'overview',
      testApiKey: '',
      testPlatform: 'web',
      testResults: null,
      // Web SDK 代码示例
      webCdnCode: `<!-- CDN 引入 -->
<script src="https://sdk.xapptool.cn/web/xapptool.js"><\/script>
<script>
  const xapptool = new XappTool();
  xapptool.init({ app_key: 'your_app_key' });
<\/script>`,
      webNpmCode: `# npm 安装
npm install xapptool-sdk-web

# 在代码中引入
import XappTool from 'xapptool-sdk-web';
const xapptool = new XappTool();`,
      webInitCode: `// 初始化 SDK
const xapptool = new XappTool();
await xapptool.init({
  app_key: 'your_app_key',
  debug: true, // 开发模式
  timeout: 5000 // 超时时间
});

console.log('SDK 初始化成功');`,
      webAutoJumpCode: `// 自定义落地页自动跳转
const xapptool = new XappTool();
await xapptool.init({ app_key: 'your_app_key' });

// 配置跳转参数
xapptool.autoJump({
  scheme: 'myapp://', // 应用scheme
  storeUrls: {
    ios: 'https://apps.apple.com/app/id123456789',
    android: 'https://play.google.com/store/apps/details?id=com.example.app',
    huawei: 'https://appgallery.huawei.com/#/app/C123456789',
    xiaomi: 'https://app.mi.com/details?id=com.example.app',
    oppo: 'https://store.oppomobile.com/product/0000000001.html',
    vivo: 'https://dev.vivo.com.cn/promote/promoteservice/devappdetail?id=123456',
    yyb: 'https://sj.qq.com/myapp/detail.htm?apkName=com.example.app',
    fallback: 'https://example.com/download.html' // 通用下载页
  },
  timeout: 2000,
  onRedirect: (result) => {
    console.log('跳转类型:', result.type); // 'scheme' 或 'store'
    console.log('耗时:', result.elapsed + 'ms');
  }
});`,
      webShareCode: `// 生成自定义落地页分享链接
const xapptool = new XappTool();
await xapptool.init({ app_key: 'your_app_key' });

// 您的自定义落地页地址
const landingPageUrl = 'https://your-website.com/landing-page.html';

// 生成带参数的分享链接
const shareUrl = xapptool.getShareUrl({
  baseUrl: landingPageUrl,
  params: {
    inviter: 'user123',
    campaign: 'summer2024',
    gift_code: 'GIFT789'
  },
  channel: 'wechat'
});

console.log('分享链接:', shareUrl);
// 输出示例: https://your-website.com/landing-page.html?xt_channel=wechat&xt_timestamp=1234567890&xt_appkey=your_app_key&inviter=user123&campaign=summer2024&gift_code=GIFT789`,
      webStoreCode: `// 手动跳转到应用商店
const xapptool = new XappTool();
await xapptool.init({ app_key: 'your_app_key' });

// 直接跳转到应用商店（不尝试scheme）
xapptool.redirectToStore({
  ios: 'https://apps.apple.com/app/id123456789',
  android: 'https://play.google.com/store/apps/details?id=com.example.app',
  huawei: 'https://appgallery.huawei.com/#/app/C123456789',
  fallback: 'https://example.com/download.html'
});`,
      webInstallCode: `// 获取安装参数（用于归因分析）
const xapptool = new XappTool();
await xapptool.init({ app_key: 'your_app_key' });

// 获取URL中的安装参数
const installParams = xapptool.getUrlParams();
console.log('安装参数:', installParams);

// 在应用内获取参数（需要配合服务端）
const params = await xapptool.getCustomInfo();
console.log('自定义参数:', params);`,
      webInviteCode: `// 生成邀请链接（旧方法，建议使用getShareUrl）
const invitationLink = await xapptool.generateInvitationLink({
  userId: 'user123',
  code: 'INVITE123',
  channel: 'wechat',
  params: {
    giftCode: 'GIFT789'
  }
});

console.log('邀请链接:', invitationLink);
// 复制到剪贴板
navigator.clipboard.writeText(invitationLink);`,
      webFullExampleCode: `<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>应用下载 - 我的应用</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 0; padding: 20px; }
        .container { max-width: 600px; margin: 0 auto; text-align: center; }
        .download-btn { 
            background: #007bff; color: white; padding: 15px 30px; 
            border: none; border-radius: 5px; font-size: 18px; cursor: pointer;
        }
        .download-btn:hover { background: #0056b3; }
        .status { margin-top: 20px; color: #666; }
    </style>
</head>
<body>
    <div class="container">
        <h1>欢迎使用我的应用</h1>
        <p>点击下面的按钮下载应用</p>
        <button id="downloadBtn" class="download-btn">立即下载</button>
        <div id="status" class="status"></div>
    </div>

    <!-- 引入Web SDK -->
    <script src="https://sdk.xapptool.cn/web/xapptool.js"><\/script>
    <script>
        // 初始化SDK
        const xapptool = new XappTool();
        
        // 页面加载完成后自动执行
        window.addEventListener('DOMContentLoaded', async function() {
            try {
                // 初始化
                await xapptool.init({ 
                    app_key: 'your_app_key_here',
                    debug: true 
                });
                
                console.log('SDK初始化成功');
                
                // 获取安装参数（用于归因）
                const params = xapptool.getUrlParams();
                console.log('URL参数:', params);
                
                // 自动跳转（可选）
                // autoDownload();
                
            } catch (error) {
                console.error('SDK初始化失败:', error);
                document.getElementById('status').textContent = '初始化失败，请刷新页面重试';
            }
        });
        
        // 自动下载函数
        function autoDownload() {
            const statusEl = document.getElementById('status');
            statusEl.textContent = '正在检测应用状态...';
            
            xapptool.autoJump({
                scheme: 'myapp://', // 替换为您的应用scheme
                storeUrls: {
                    ios: 'https://apps.apple.com/app/id123456789', // 替换为您的App Store链接
                    android: 'https://play.google.com/store/apps/details?id=com.example.app', // 替换为您的Google Play链接
                    huawei: 'https://appgallery.huawei.com/#/app/C123456789', // 华为应用市场
                    xiaomi: 'https://app.mi.com/details?id=com.example.app', // 小米应用商店
                    fallback: 'https://example.com/download.html' // 通用下载页
                },
                timeout: 2000,
                onRedirect: (result) => {
                    console.log('跳转结果:', result);
                    if (result.type === 'scheme') {
                        statusEl.textContent = '正在打开应用...';
                    } else if (result.type === 'store') {
                        statusEl.textContent = '正在跳转到应用商店...';
                    }
                },
                onTimeout: (error) => {
                    console.log('检测超时:', error);
                    statusEl.textContent = '检测超时，请手动点击下载';
                }
            });
        }
        
        // 手动下载按钮点击事件
        document.getElementById('downloadBtn').addEventListener('click', function() {
            const statusEl = document.getElementById('status');
            statusEl.textContent = '正在跳转...';
            
            // 直接跳转到应用商店
            const result = xapptool.redirectToStore({
                ios: 'https://apps.apple.com/app/id123456789',
                android: 'https://play.google.com/store/apps/details?id=com.example.app',
                huawei: 'https://appgallery.huawei.com/#/app/C123456789',
                fallback: 'https://example.com/download.html'
            });
            
            if (!result) {
                statusEl.textContent = '跳转失败，请检查配置';
            }
        });
    <\/script>
</body>
</html>`,
      
      
      // UniApp SDK 代码示例
      uniappNpmCode: `# npm 安装
npm install xapptool-sdk-uniapp

# 或者下载文件
# 下载 xapptool.js 放入 common 目录`,
      uniappInitCode: `// App.vue 中初始化
import XappTool from 'xapptool-sdk-uniapp';

export default {
  async onLaunch() {
    const xapptool = new XappTool();
    await xapptool.init({
      app_key: 'your_app_key'
    });
    
    console.log('UniApp SDK 初始化成功');
  }
}`,
      uniappInstallCode: `// 获取安装参数
const xapptool = new XappTool();
const installParams = await xapptool.getInstallParams();

if (installParams.inviter) {
  // 建立邀请关系
  uni.request({
    url: '/api/bind-inviter',
    method: 'POST',
    data: {
      userId: this.userId,
      inviterId: installParams.inviter.userId
    }
  });
}`,
      uniappPlatformCode: `// 平台适配
const xapptool = new XappTool();

// 微信小程序
if (uni.getSystemInfoSync().platform === 'wechat') {
  await xapptool.init({
    app_key: 'your_app_key',
    platform: 'wechat-mp'
  });
}

// App 端
if (uni.getSystemInfoSync().platform === 'android' || 
    uni.getSystemInfoSync().platform === 'ios') {
  await xapptool.init({
    app_key: 'your_app_key',
    platform: 'app'
  });
}`,
      
      // React SDK 代码示例
      reactInstallCode: `# 安装 React SDK
npm install xapptool-sdk-react

# 或者
yarn add xapptool-sdk-react`,
      reactInitCode: `// App.js 中初始化
import { XappToolProvider } from 'xapptool-sdk-react';

function App() {
  return (
    <XappToolProvider 
      apiKey="your_app_key"
      debug={true}
    >
      <YourApp />
    </XappToolProvider>
  );
}`,
      reactHookCode: `// 使用 React Hook
import { useXappTool } from 'xapptool-sdk-react';

function InvitationComponent() {
  const { getInstallParams, generateInvitationLink } = useXappTool();
  
  const [inviter, setInviter] = useState(null);
  
  useEffect(() => {
    const fetchInstallParams = async () => {
      const params = await getInstallParams();
      if (params.inviter) {
        setInviter(params.inviter);
      }
    };
    
    fetchInstallParams();
  }, [getInstallParams]);
  
  return (
    <div>
      {inviter && <p>邀请人: {inviter.userId}</p>}
    </div>
  );
}`,
      reactComponentCode: `// 完整组件示例
import React, { useState, useEffect } from 'react';
import { useXappTool } from 'xapptool-sdk-react';

function InvitationHandler() {
  const { getInstallParams, generateInvitationLink } = useXappTool();
  const [loading, setLoading] = useState(true);
  const [invitationData, setInvitationData] = useState(null);
  
  useEffect(() => {
    const handleInvitation = async () => {
      try {
        const params = await getInstallParams();
        
        if (params.inviter) {
          // 处理邀请逻辑
          await fetch('/api/process-invitation', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
              inviterId: params.inviter.userId,
              invitationCode: params.inviter.code
            })
          });
          
          setInvitationData(params);
        }
      } catch (error) {
        console.error('处理邀请失败:', error);
      } finally {
        setLoading(false);
      }
    };
    
    handleInvitation();
  }, [getInstallParams]);
  
  if (loading) return <div>加载中...</div>;
  
  return (
    <div className="invitation-handler">
      {invitationData ? (
        <div>
          <h3>欢迎！您是通过邀请链接进入的</h3>
          <p>邀请人: {invitationData.inviter.userId}</p>
          {invitationData.params?.giftCode && (
            <p>礼品码: {invitationData.params.giftCode}</p>
          )}
        </div>
      ) : (
        <div>
          <h3>欢迎访问！</h3>
          <p>您可以直接使用我们的服务</p>
        </div>
      )}
    </div>
  );
}`,
      
      // Android SDK 代码示例
      androidGradleCode: `// build.gradle (Module: app)
dependencies {
    implementation 'com.xapptool:sdk:1.0.0'
    
    // 可选：如果需要更多功能
    implementation 'com.xapptool:sdk-full:1.0.0'
}`,
      androidManifestCode: `<!-- AndroidManifest.xml -->
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    
    <!-- 必要权限 -->
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    
    <!-- 可选权限 -->
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
    <uses-permission android:name="android.permission.READ_PHONE_STATE" />
    
    <application>
        <!-- SDK 配置 -->
        <meta-data
            android:name="xapptool_api_key"
            android:value="your_app_key" />
    </application>
</manifest>`,
      androidInitCode: `// Application 类中初始化
public class MyApplication extends Application {
    @Override
    public void onCreate() {
        super.onCreate();
        
        // 初始化 XappTool SDK
        XappTool.init(this, "your_app_key");
        
        // 或者使用 Builder 模式
        new XappTool.Builder(this)
            .apiKey("your_app_key")
            .debug(BuildConfig.DEBUG)
            .timeout(5000)
            .build();
    }
}`,
      androidInstallCode: `// 获取安装参数
XappTool.getInstallParams(new XappToolCallback<InstallParams>() {
    @Override
    public void onSuccess(InstallParams params) {
        if (params.getInviter() != null) {
            // 处理邀请逻辑
            processInvitation(params.getInviter());
        }
        
        if (params.getChannel() != null) {
            // 统计渠道
            trackChannel(params.getChannel());
        }
    }
    
    @Override
    public void onError(XappToolException error) {
        Log.e("XappTool", "获取安装参数失败", error);
    }
});

// Kotlin 协程方式
lifecycleScope.launch {
    try {
        val params = XappTool.getInstallParams()
        if (params.inviter != null) {
            processInvitation(params.inviter)
        }
    } catch (e: XappToolException) {
        Log.e("XappTool", "获取安装参数失败", e)
    }
}`,
      
      // iOS SDK 代码示例
      iosPodCode: `# Podfile
pod 'XappToolSDK', '~> 1.0.0'

# 或者使用全功能版本
pod 'XappToolSDK/Full', '~> 1.0.0'`,
      iosSpmCode: `// Package.swift
.package(url: "https://github.com/xapptool/xapptool-ios-sdk.git", from: "1.0.0")

// 或者在 Xcode 中添加
// https://github.com/xapptool/xapptool-ios-sdk`,
      iosInitCode: `// AppDelegate.swift
import XappToolSDK

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {
    
    func application(_ application: UIApplication, 
                     didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        
        // 初始化 SDK
        XappTool.initialize(apiKey: "your_app_key")
        
        // 或者使用配置模式
        let config = XappTool.Configuration(
            apiKey: "your_app_key",
            debug: true,
            timeout: 5.0
        )
        XappTool.initialize(with: config)
        
        return true
    }
}`,
      iosInstallCode: `// 获取安装参数
XappTool.shared.getInstallParams { result in
    switch result {
    case .success(let params):
        if let inviter = params.inviter {
            // 处理邀请逻辑
            self.processInvitation(inviter)
        }
        
        if let channel = params.channel {
            // 统计渠道
            self.trackChannel(channel)
        }
        
    case .failure(let error):
        print("获取安装参数失败: \\(error)")
    }
}

// Swift async/await (iOS 13+)
do {
    let params = try await XappTool.shared.getInstallParams()
    if let inviter = params.inviter {
        processInvitation(inviter)
    }
} catch {
    print("获取安装参数失败: \\(error)")
}`,
      
      // 常见问题数据
      faqs: [
        {
          id: 1,
          question: "SDK 初始化失败怎么办？",
          answer: "请检查以下几点：1. API Key 是否正确；2. 网络连接是否正常；3. 域名白名单是否配置正确。",
          expanded: false,
          code: `// 调试代码
const xapptool = new XappTool();
try {
  await xapptool.init({ 
    apiKey: 'your_api_key',
    debug: true 
  });
} catch (error) {
  console.error('初始化失败:', error);
}`,
          codeType: 'javascript'
        },
        {
          id: 2,
          question: "设备指纹不一致怎么办？",
          answer: "设备指纹可能会因为浏览器更新、插件变化等因素改变。建议结合IP地址、用户行为等多维度信息进行归因。",
          expanded: false
        },
        {
          id: 3,
          question: "邀请参数获取不到怎么办？",
          answer: "请确认：1. 邀请链接是否正确生成；2. 用户是否通过邀请链接访问；3. 归因时间窗口是否过期（默认7天）。",
          expanded: false,
          code: `// 检查邀请链接格式
const link = await xapptool.generateInvitationLink({
  userId: 'user123',
  code: 'INVITE123'
});
console.log('邀请链接:', link);

// 验证链接参数
const url = new URL(link);
console.log('链接参数:', url.searchParams.toString());`,
          codeType: 'javascript'
        },
        {
          id: 4,
          question: "如何提高归因准确率？",
          answer: "建议：1. 启用多维度设备指纹；2. 设置合理的归因时间窗口；3. 结合服务器端验证；4. 使用防作弊机制。",
          expanded: false
        },
        {
          id: 5,
          question: "SDK 支持哪些浏览器？",
          answer: "Web SDK 支持所有现代浏览器（Chrome、Firefox、Safari、Edge）IE11及以上版本。移动端支持iOS 9+和Android 4.4+",
          expanded: false
        }
      ]
    };
  },
  methods: {
    setCurrentSection(section) {
      this.currentSection = section;
      // 滚动到顶部
      window.scrollTo(0, 0);
    },
    
    copyCode(code) {
      navigator.clipboard.writeText(code).then(() => {
        alert('代码已复制到剪贴板');
      }).catch(err => {
        console.error('复制失败', err);
        alert('复制失败，请手动复制');
      });
    },
    
    async runTest() {
      if (!this.testApiKey) {
        alert('请输入 API Key');
        return;
      }
      
      this.testResults = {
        success: true,
        message: '测试运行中...',
        details: null
      };
      
      // 模拟测试过程
      setTimeout(() => {
        this.testResults = {
          success: true,
          message: '测试通过！SDK 集成正常',
          details: {
            platform: this.testPlatform,
            apiKey: this.testApiKey.substring(0, 8) + '...',
            timestamp: new Date().toISOString(),
            results: {
              deviceFingerprint: 'fp_1234567890',
              installParams: {
                inviter: { userId: 'test_user', code: 'TEST123' },
                channel: 'test_channel'
              },
              attributionAccuracy: 99.9
            }
          }
        };
      }, 2000);
    },
    
    toggleFaq(faq) {
      faq.expanded = !faq.expanded;
    }
  },
  mounted() {
    // 初始化 highlight.js
    this.$nextTick(() => {
      document.querySelectorAll('pre code').forEach((block) => {
        hljs.highlightElement(block);
      });
    });
  },
  updated() {
    // 重新高亮代码块
    this.$nextTick(() => {
      document.querySelectorAll('pre code').forEach((block) => {
        hljs.highlightElement(block);
      });
    });
  }
};
</script>

<style scoped>
.documentation {
  display: flex;
  background: #ffffff;
}

.content-wrapper {
  display: flex;
  flex: 1;
}

.sidebar {
  width: 250px;
  padding: 2rem;
  background-color: #ffffff;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  border-right: 1px solid #e4e7ed;
}

.sidebar-header {
  padding: 0 0 1rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.sidebar ul {
  list-style: none;
  padding: 0;
}

.sidebar li {
  margin: 1rem 0;
}

.sidebar a {
  color: #303133;
  text-decoration: none;
  transition: color 0.2s;
  position: relative;
  display: block;
  padding: 0.5rem 1rem;
}

.sidebar a.active {
  color: #6478ff;
}

.sidebar a.active::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 60%;
  background-color: #6478ff;
  border-radius: 2px;
}

.sidebar a:hover {
  color: #6478ff;
}

.content {
  flex: 1;
  padding: 2rem;
  max-width: 800px;
  margin: 0 auto;
}
.sdk-documentation {
  min-height: 100vh;
  background-color: #f8f9fa;
}

.content-wrapper {
  display: flex;
  max-width: 1400px;
  margin: 0 auto;
  background: white;
  box-shadow: 0 0 20px rgba(0,0,0,0.1);
}

.sidebar {
  width: 280px;
  /* background: #2c3e50; */
  color: white;
  padding: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.practice-category li:before {
  content: "✓";
  color: #28a745;
  font-weight: bold;
  margin-right: 0.5rem;
}

/* FAQ 样式 */
.faq-section {
  max-width: 800px;
}

.faq-item {
  background: white;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  margin-bottom: 1rem;
  overflow: hidden;
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  cursor: pointer;
  transition: background 0.3s ease;
}

.faq-question:hover {
  background: #f8f9fa;
}

.faq-question h3 {
  margin: 0;
  color: #2c3e50;
  font-size: 1.1rem;
}

.faq-icon {
  font-size: 1.5rem;
  color: #6c757d;
  font-weight: bold;
}

.faq-answer {
  padding: 0 1.5rem 1.5rem;
  border-top: 1px solid #e9ecef;
}

.faq-answer p {
  margin: 0;
  color: #495057;
  line-height: 1.6;
}

.faq-code {
  margin-top: 1rem;
}

.faq-code pre {
  background: #f8f9fa;
  padding: 1rem;
  border-radius: 6px;
  font-size: 0.9rem;
  overflow-x: auto;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .content-wrapper {
    flex-direction: column;
  }
  
  .sidebar {
    width: 100%;
    height: auto;
    position: static;
  }
  
  .content {
    max-width: 100%;
    padding: 2rem;
  }
}

@media (max-width: 768px) {
  .feature-grid {
    grid-template-columns: 1fr;
  }
  
  .platform-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .install-methods {
    grid-template-columns: 1fr;
  }
  
  .practice-categories {
    grid-template-columns: 1fr;
  }
  
  .test-form {
    grid-template-columns: 1fr;
  }
  
  .step {
    flex-direction: column;
    text-align: center;
  }
  
  .step-number {
    margin: 0 auto 1rem;
  }
}

@media (max-width: 480px) {
  .content {
    padding: 1rem;
  }
  
  .platform-grid {
    grid-template-columns: 1fr;
  }
  
  .sidebar-header {
    padding: 1rem;
  }
  
  .sidebar a {
    padding: 0.6rem 1rem;
  }
}

/* 标题样式 */
h1 {
  color: #2c3e50;
  font-size: 2.5rem;
  margin-bottom: 2rem;
  font-weight: 700;
}

h2 {
  color: #34495e;
  font-size: 1.8rem;
  margin: 2.5rem 0 1.5rem;
  font-weight: 600;
}

h3 {
  color: #34495e;
  font-size: 1.3rem;
  margin: 2rem 0 1rem;
  font-weight: 600;
}

h4 {
  color: #34495e;
  font-size: 1.1rem;
  margin: 1.5rem 0 0.8rem;
  font-weight: 600;
}

p {
  line-height: 1.7;
  color: #495057;
  margin-bottom: 1rem;
}

/* 链接样式 */
a {
  color: #3498db;
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: #2980b9;
  text-decoration: underline;
}

/* 代码高亮样式覆盖 */
.hljs {
  background: #f8f9fa !important;
  color: #495057 !important;
}

.hljs-keyword {
  color: #d63384 !important;
}

.hljs-string {
  color: #198754 !important;
}

.hljs-number {
  color: #fd7e14 !important;
}

.hljs-comment {
  color: #6c757d !important;
}

.hljs-function {
  color: #0d6efd !important;
}
</style> white;
  padding: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sidebar-header {
  padding: 2rem 1.5rem;
  border-bottom: 1px solid #34495e;
}

.sidebar-header h3 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
}

.sidebar ul {
  list-style: none;
  padding: 1rem 0;
  margin: 0;
}

.sidebar li {
  margin: 0;
}

.sidebar a {
  display: block;
  padding: 0.8rem 1.5rem;
  color: #ecf0f1;
  text-decoration: none;
  transition: all 0.3s ease;
  border-left: 3px solid transparent;
  font-size: 0.95rem;
}

.sidebar a:hover {
  background: #34495e;
  color: #3498db;
}

.sidebar a.active {
  background: #34495e;
  color: #3498db;
  border-left-color: #3498db;
}

.content {
  flex: 1;
  padding: 3rem;
  max-width: calc(100% - 280px);
}

/* 概述页面样式 */
.overview-section {
  max-width: 900px;
}

.feature-grid {
  display: block;
  margin: 2rem 0;
}

.feature-card {
  background: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  text-align: left;
  margin-bottom: 1.5rem;
}

.feature-card:hover {
  transform: none;
}

.feature-icon {
  display: none;
}

.feature-card h3 {
  color: #2c3e50;
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
}

.feature-card p {
  color: #7f8c8d;
  line-height: 1.6;
}

.platform-support {
  margin: 4rem 0;
}

.platform-grid {
  display: block;
  margin-top: 1rem;
}

.platform-item {
  background: transparent;
  padding: 0.5rem 0;
  border-radius: 0;
  text-align: left;
  box-shadow: none;
}

.platform-item:hover {
  box-shadow: none;
}

.platform-icon {
  display: none;
}

.platform-item h4 {
  color: #2c3e50;
  margin-bottom: 0.25rem;
}

.platform-item p {
  color: #7f8c8d;
  font-size: 0.95rem;
}

/* 快速开始样式 */
.quickstart-steps {
  max-width: 800px;
}

.step {
  display: flex;
  align-items: flex-start;
  margin: 3rem 0;
  padding: 2rem;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.step-number {
  width: 60px;
  height: 60px;
  background: #3498db;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: bold;
  margin-right: 2rem;
  flex-shrink: 0;
}

.step-content h3 {
  color: #2c3e50;
  margin-bottom: 1rem;
  font-size: 1.3rem;
}

.step-content p {
  color: #7f8c8d;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.step-link {
  color: #3498db;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

.step-link:hover {
  color: #2980b9;
}

.sdk-links {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.sdk-links a {
  color: #3498db;
  text-decoration: none;
  padding: 0.5rem 1rem;
  border: 1px solid #3498db;
  border-radius: 6px;
  transition: all 0.3s ease;
  font-size: 0.9rem;
}

.sdk-links a:hover {
  background: #3498db;
  color: white;
}

/* SDK 部分样式 */
.sdk-section {
  max-width: 900px;
}

.install-methods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin: 2rem 0;
}

.install-method {
  background: #f8f9fa;
  padding: 1.5rem;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.install-method h3 {
  color: #2c3e50;
  margin-bottom: 1rem;
}

.download-btn {
  display: inline-block;
  background: #3498db;
  color: white;
  padding: 0.8rem 1.5rem;
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.3s ease;
  font-weight: 500;
}

.download-btn:hover {
  background: #2980b9;
}

/* 警告框样式 */
.warning-box {
  background: #fff3cd;
  border: 1px solid #ffeaa7;
  border-radius: 8px;
  padding: 1.5rem;
  margin: 2rem 0;
}

.warning-box h3 {
  color: #856404;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.warning-box p {
  color: #856404;
  margin: 0.5rem 0;
  line-height: 1.6;
}

.warning-box strong {
  color: #d63384;
}

/* 配置表格样式 */
.config-table {
  margin: 2rem 0;
  overflow-x: auto;
}

.config-table table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.config-table th,
.config-table td {
  padding: 1rem;
  text-align: left;
  border-bottom: 1px solid #e9ecef;
}

.config-table th {
  background: #f8f9fa;
  font-weight: 600;
  color: #495057;
}

.config-table td {
  color: #6c757d;
  font-size: 0.95rem;
}

.config-table tr:last-child td {
  border-bottom: none;
}

.config-table tr:hover {
  background: #f8f9fa;
}

/* 代码样式 */
.code-content {
  position: relative;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  margin: 1.5rem 0;
  overflow: hidden;
}

.copy-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #6c757d;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.8rem;
  transition: background 0.3s ease;
  z-index: 10;
}

.copy-btn:hover {
  background: #5a6268;
}

.code-content pre {
  margin: 0;
  padding: 1.5rem;
  overflow-x: auto;
  font-size: 0.9rem;
  line-height: 1.5;
}

.code-content code {
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
}

/* 指南样式 */
.guide-section {
  max-width: 800px;
}

.steps {
  margin: 2rem 0;
}

.api-key-demo {
  background: #f8f9fa;
  padding: 1.5rem;
  border-radius: 8px;
  margin: 1rem 0;
}

.api-key-example {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.api-key-label {
  font-weight: 600;
  color: #495057;
}

.api-key-value {
  font-family: monospace;
  background: #e9ecef;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  color: #6c757d;
}

.config-example {
  background: #f8f9fa;
  padding: 1.5rem;
  border-radius: 8px;
  margin: 1rem 0;
}

.config-example p {
  margin: 0.5rem 0;
  color: #495057;
}

.security-tips {
  background: #fff3cd;
  border: 1px solid #ffeaa7;
  border-radius: 8px;
  padding: 1.5rem;
  margin: 2rem 0;
}

.security-tips h3 {
  color: #856404;
  margin-bottom: 1rem;
}

.security-tips ul {
  color: #856404;
  margin: 0;
  padding-left: 1.5rem;
}

.security-tips li {
  margin: 0.5rem 0;
}

/* 测试工具样式 */
.test-tool {
  background: white;
  border: 1px solid #e9ecef;
  border-radius: 12px;
  padding: 2rem;
  margin: 2rem 0;
}

.test-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: #495057;
}

.form-group input,
.form-group select {
  padding: 0.8rem;
  border: 1px solid #ced4da;
  border-radius: 6px;
  font-size: 1rem;
  transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: #3498db;
  box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25);
}

.test-btn {
  background: #28a745;
  color: white;
  border: none;
  padding: 1rem 2rem;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s ease;
}

.test-btn:hover {
  background: #218838;
}

.test-results {
  margin-top: 2rem;
  padding: 1.5rem;
  background: #f8f9fa;
  border-radius: 8px;
}

.result-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border-radius: 6px;
  margin-bottom: 1rem;
}

.result-item.success {
  background: #d4edda;
  border: 1px solid #c3e6cb;
}

.result-item:not(.success) {
  background: #f8d7da;
  border: 1px solid #f5c6cb;
}

.result-icon {
  font-size: 1.2rem;
}

.result-text {
  font-weight: 500;
}

.result-details {
  margin-top: 1rem;
}

.result-details pre {
  background: white;
  padding: 1rem;
  border-radius: 6px;
  font-size: 0.9rem;
  overflow-x: auto;
}

/* 最佳实践样式 */
.practice-categories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin: 2rem 0;
}

.practice-category {
  background: white;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.practice-category h3 {
  color: #2c3e50;
  margin-bottom: 1.5rem;
  font-size: 1.2rem;
}

.practice-category ul {
  list-style: none;
  padding: 0;
}

.practice-category li {
  padding: 0.5rem 0;
  color: #6c757d;
}

/* 新增：集成方案选择样式 */
.integration-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin: 2rem 0;
}

.option-card {
  background: white;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  border: 2px solid #e9ecef;
  transition: all 0.3s ease;
}

.option-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
  border-color: #3498db;
}

.option-card h3 {
  color: #2c3e50;
  margin-bottom: 1rem;
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.option-features {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.feature-tag {
  background: #e3f2fd;
  color: #1976d2;
  padding: 0.3rem 0.8rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
}

/* 新增：集成章节样式 */
.integration-section {
  margin: 3rem 0;
  padding: 2rem;
  background: #f8f9fa;
  border-radius: 12px;
  border-left: 4px solid #3498db;
}

.integration-section h2 {
  color: #2c3e50;
  margin-bottom: 1rem;
  font-size: 1.5rem;
}

.section-description {
  background: white;
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 2rem;
  border-left: 3px solid #28a745;
}

.section-description p {
  margin: 0;
  color: #495057;
  font-weight: 500;
}

/* 新增：步骤详情样式 */
.step-detail {
  background: white;
  padding: 1.5rem;
  border-radius: 8px;
  margin: 1rem 0;
  border-left: 3px solid #17a2b8;
}

.step-detail p {
  margin: 0.5rem 0;
  color: #495057;
  position: relative;
  padding-left: 1rem;
}

.step-detail p::before {
  content: "•";
  color: #17a2b8;
  position: absolute;
  left: 0;
  font-weight: bold;
}

/* 新增：代码示例样式 */
.code-example {
  background: white;
  padding: 1.5rem;
  border-radius: 8px;
  margin: 1rem 0;
  border-left: 3px solid #ffc107;
}

.code-example h4 {
  color: #495057;
  margin-bottom: 1rem;
  font-size: 1rem;
}

.code-example pre {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  padding: 1rem;
  margin: 0.5rem 0;
  font-size: 0.9rem;
  overflow-x: auto;
}

.code-example code {
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  color: #495057;
}

/* 新增：步骤提示样式 */
.step-note {
  background: #fff3cd;
  border: 1px solid #ffeaa7;
  border-radius: 8px;
  padding: 1rem;
  margin: 1rem 0;
}

.step-note p {
  margin: 0;
  color: #856404;
  font-weight: 500;
}

.step-note strong {
  color: #d63384;
}

/* 新增：文档步骤样式增强 */
.doc-steps {
  counter-reset: step-counter;
}

.doc-steps > li {
  counter-increment: step-counter;
  position: relative;
  padding-left: 4rem;
  margin-bottom: 2rem;
  background: white;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.doc-steps > li::before {
  content: counter(step-counter);
  position: absolute;
  left: 1.5rem;
  top: 1.5rem;
  background: #3498db;
  color: white;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1.1rem;
}

.doc-steps h3 {
  color: #2c3e50;
  margin-bottom: 1rem;
  font-size: 1.2rem;
}

.doc-steps p {
  color: #6c757d;
  margin-bottom: 1rem;
}

.step-link {
  display: inline-block;
  background: #3498db;
  color: white;
  padding: 0.5rem 1.5rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 500;
  transition: background 0.3s ease;
  margin-top: 0.5rem;
}

.step-link:hover {
  background: #2980b9;
  color: white;
  text-decoration: none;
}